<template>
    <div class="header" >
        <div class="left">
            <span style="font-size: 20px">{{ name }}</span>
        </div>
        <div class="right">
            <div>
            <el-popover
                    placement="bottom"
                    :width="200"
                    trigger="hover"
                    popper-class="popper-user-box" v-if="showPopover">
                <template #reference>
                    <div class="author">
                        <i class="icon el-icon-user" />
                        {{ currentUser && currentUser.name || '无名氏' }}
                        <i class="el-icon-caret-bottom" />
                    </div>
                </template>
                <div class="nickname" >
                    <p>邮箱：{{ currentUser && currentUser.email || '' }}</p>
                </div>
                <el-button size="small" effect="dark" class="logout" @click="logout">注销</el-button>
            </el-popover>
            </div>
        </div>

    </div>

</template>

<script>
    import Auth from "../pages/Auth.vue";
    import http from "../utils/req";
    import {ElMessage} from "element-plus/es";
    import userService from "../utils/userService";
    import router from "../router";

    export default {
        name: "Header",
        components: {Auth},
        data(){
            return{
                showLogin: false,
                userInfo: {
                    email: '',
                    name: '',
                    username:''
                },
                userService: userService
            }
        },
        methods:{
            logout(){
                http.post('/auth/logout').then((value => {
                    if (value.data.code === 200){
                        ElMessage.success({
                            message: value.data.msg||'注销成功',
                            type: 'success',
                            zIndex: -1
                        });
                        userService.setCurrentUser(null)
                        http.init(true)
                        router.push('/');
                    }else {
                        ElMessage.warning(value.data.msg);
                    }
                }))
            }
        },
        computed: {
            userService() {
                this.username = sessionStorage.getItem("username");
                this.email = sessionStorage.getItem("email");
                return userService;
            },
            showPopover(){
                return userService.hasUserLogin();
            },
            currentUser(){
                return this.userService.currentUser;
            }
        }
    }
</script>

<style scoped>
    .header {
        height: 75px;
        border-bottom: 1px solid #e9e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .right{
        position: absolute;
        right: 30px;
        cursor: pointer;
    }

</style>

<style>
    .popper-user-box {
        background: url('https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png') 50% 50% no-repeat!important;
        background-size: cover!important;
        border-radius: 0!important;
    }
    .popper-user-box .nickname {
        position: relative;
        color: #ffffff;
    }
    .popper-user-box .nickname .logout {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }
</style>